<template>
  <div>
    <public-head :title="monthTitle" :path="path" />
    <div class="header">
      <div class="year">
        <img
          src="../../../../../public/images/my/left_date.png"
          alt=""
          @click="leftYear()"
        />
        <span>2021</span>
        <img
          src="../../../../../public/images/my/right_date.png"
          alt=""
          @click="rightYear()"
        />
      </div>
      <div>
        <van-tabs
          class="greyTab"
          color="#198AFF"
          line-width="20px"
          v-model="activeMonth"
          title-active-color="#198AFF"
          title-inactive-color="#333"
          background="#fff"
        >
          <van-tab v-for="(e, index) in tabData" :key="index" :title="e.title">
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <public-title :title="tuiqinTitle" :fatherTitle="tuiqinFtitle" />
    <div class="attendance ">
      <div
        class="attendanceInfo"
        v-for="(item, index) in attendanceContrnt"
        :key="index"
      >
        <div :class="tui[index]">
          <p>{{ item.nums }}</p>
          <p>{{ item.names }}</p>
        </div>
      </div>
    </div>

    <public-title :title="overtimeTitle" :fatherTitle="overtimeFtitle" />
    <div class="attendance ">
      <div
        class="attendanceInfo"
        v-for="(item, index) in overtime"
        :key="index"
      >
        <div :class="jia[index]">
          <p>{{ item.nums }}</p>
          <p>{{ item.names }}</p>
        </div>
      </div>
    </div>

    <public-title :title="jiaqinTitle" :fatherTitle="jiaqinFtitle" />
    <div class="attendance ">
      <div
        class="attendanceInfo"
        v-for="(item, index) in jiaqinContent"
        :key="index"
      >
        <div :class="jiaqin[index]">
          <p>{{ item.nums }}</p>
          <p>{{ item.names }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PublicHead from "../../../../components/PublicHead";
import PublicTitle from "../../../../components/PublicTitle";
export default {
  name: "mymonth",
  components: {
    PublicHead,
    PublicTitle,
  },
  data() {
    return {
      monthTitle: "我的月报",
      path: "mymonth",
      tuiqinTitle: "出退勤统计",
      tuiqinFtitle: "(次)",
      overtimeTitle: "加班统计",
      overtimeFtitle: "(分钟)",
      jiaqinTitle: "假勤统计",
      jiaqinFtitle: "(分钟)",
      activeMonth: 2,
      attendanceContrnt: [
        { names: "迟到", nums: "0" },
        { names: "早退", nums: "0" },
        { names: "旷工", nums: "0" },
        { names: "缺卡", nums: "2" },
        { names: "地点异常", nums: "0" },
        { names: "设备异常", nums: "0" },
      ],
      tui: ["tui1", "tui2", "tui3", "tui4"],
      overtime: [
        { names: "工作日加班", nums: "0" },
        { names: "休息日加班", nums: "120" },
        { names: "节假日加班", nums: "0" },
      ],
      jia: ["jia1", "jia2", "jai3"],
      jiaqinContent: [
        { names: "打卡补卡", nums: "0" },
        { names: "外勤", nums: "0" },
        { names: "外出", nums: "0" },
        { names: "出差", nums: "0" },
        { names: "年假", nums: "40" },
        { names: "事假", nums: "0" },
        { names: "病假", nums: "240" },
        { names: "调休假", nums: "120" },
        { names: "婚假", nums: "0" },
        { names: "产假", nums: "0" },
        { names: "陪产假", nums: "0" },
        { names: "其他", nums: "0" },
      ],
      jiaqin: [
        "jiaqin1",
        "jiaqin2",
        "jiaqin3",
        "jiaqin4",
        "jiaqin5",
        "jiaqin6",
        "jiaqin7",
        "jiaqin8",
      ],
      tabData: [
        { title: "1月" },
        { title: "2月" },
        { title: "3月" },
        { title: "4月" },
        { title: "5月" },
        { title: "6月" },
        { title: "7月" },
        { title: "8月" },
        { title: "9月" },
        { title: "10月" },
        { title: "11月" },
        { title: "12月" },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.header{
    background-color  #fff
    width 100%
    height 90px
    img{
        width: 9px;
        height: 15px;
        vertical-align middle
    }
    .year{
        text-align center
        line-height 45px
        border-bottom 1px solid #DDDDDD
        span{
            margin 0  15px
            font-size 10px
        }
    }
}
.attendance{
    width 345px
    margin 0 15px
    display flex
    justify-content center
    text-align center
    flex-flow wrap
    background-color #fff
    border-radius 5px
    color #333333
    font-size 14px
    .attendanceInfo{
        width 33%
        line-height 30px
        margin 4px 0
        .tui4{
            p:first-child{
                color #FD3F3F
            }
        }
        .jia2{
            p:first-child{
                color #198AFF
            }
        }
        .jiaqin5{
            p:first-child{
                color #198AFF
            }
        }
        .jiaqin7{
            p:first-child{
                color #F95425
            }
        }
        .jiaqin8{
            p:first-child{
                color #1ADFAB
            }
        }
    }
}
</style>
